import { SearchPanel } from "./search-panel";
import { cleanObject, useDebounce, useMount, queryStr } from "utils";
import * as qs from "qs";
import React from "react";
import { List } from "./list";
import { useEffect, useState } from "react";
import { useAuth } from "context/auth-context";
import { useHttp } from "utils/http";
import { useProjects } from "utils/project";
import { useUsers } from "utils/user";
import styled from "@emotion/styled";
import { Button, Typography } from "antd";
import { Helmet } from "react-helmet";
import { useUrlQueryParam } from "utils/url";
import { useProjectsSearchParams } from "./util";
import { Row } from "components/lib";

const apiUrl = process.env.REACT_APP_API_URL;

export const ProjectListScreen = (props: { projectButton: JSX.Element }) => {
  const [projectsParam, setParam] = useProjectsSearchParams();
  const debounceParam = useDebounce(projectsParam);
  const { error, data: list, isLoading, retry } = useProjects(debounceParam);
  const { data: users } = useUsers();
  return (
    <Container>
      <Row between={true}>
        <h1>项目列表</h1>
        {props.projectButton}
      </Row>
      <SearchPanel
        param={projectsParam}
        setParam={setParam}
        users={users || []}
      />
      {error ? (
        <Typography.Text type="danger">{error.message}</Typography.Text>
      ) : null}
      <List
        refresh={retry}
        dataSource={list || []}
        users={users || []}
        loading={isLoading}
        projectButton={props.projectButton}
      />
    </Container>
  );
};

ProjectListScreen.whyDidYouRender = true;

const Container = styled.div`
  padding: 3.2rem;
`;
